<template>
  <!-- // 登录日志 -->
  <div>
    <!-- 数据表格 -->
    <el-table
      border
      lazy
      ref="table"
      :data="data"
      v-loading="loading"
      height="calc(100vh - 360px)"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="序号" width="55" align="center" type="index">
        <template slot-scope="scope">
          <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        align="center"
        prop="username"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        label="邮箱"
        align="center"
        prop="email"
        show-overflow-tooltip
      /> -->
      <el-table-column label="角色" align="center" prop="role_name" />
      <el-table-column label="学校" align="center" prop="schoole_name" />
      <el-table-column label="登录IP" align="center" prop="ip" />
      <el-table-column label="登录时间" align="center" prop="sort">
        <template slot-scope="scope">
          {{ $parseTime(scope.row.create_time) }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        align="center"
        :resizable="false"
      >
        <template slot-scope="{ row }">
          <el-popconfirm
            title="确定要删除该型号吗？"
            @confirm="remove(row)"
            class="ele-action"
          >
            <el-button
              size="small"
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              :underline="false"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      :total="total"
      :page.sync="query.page"
      :limit.sync="query.limit"
      @pagination="getData"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "DeviceIMEI",
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      loading: false, // 表格加载状态
      total: 0, // 数据总数
      query: { page: 1, limit: 10 },
      data: [],
      ids: [], // 选中数组
      selection: [] // 表格选中数据
    };
  },
  props: {
    params: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mounted() {
    this.getData({});
  },
  methods: {
    /* 获取表格数据 */
    getData(params) {
      this.loading = true;
      this.$http
        .get("/loginlog/index", {
          params: { ...params, ...this.query, ...{ type: 1 } }
        })
        .then(res => {
          console.log(res);
          this.loading = false;
          this.total = res.data.count;
          this.data = res.data.data;
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    exportData() {
      this.$http
        .get("/loginlog/exportExcel", {
          params: { limit: 999999 }
        })
        .then(res => {
          if (res.data.success) {
            window.open(res.data.data);
          }
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.selection = selection;
    },
    /* 删除 */
    remove(row) {
      this.loading = true;
      const params = { id: row.id };
      this.$http
        .get("/loginlog/delete", { params: params })
        .then(res => {
          this.loading = false;
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.getData();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    }
  }
};
</script>

<style scoped></style>
